<template>
	<view>
		<!-- 搜索组件 -->
		<Search :value="keyword" />
		
		<!-- tab切换 -->
		<view class="tab">		
			<view class="tab-item" 
			v-for="(item, index) in ['综合', '销量', '价格']"
			:key="index"
			@click="handleTab(index)"
			:class="{active: current === index}"
			>
				{{item}}
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="goods-list">
			<!-- 要循环渲染 -->
			<navigator :url="`/pages/goods_detail/index?goods_id=${item.goods_id}`" 
			class="goods-item" 
			v-for="(item, index) in list"
			:key="index">
				<!-- 添加图片懒加载 -->
				<image lazy-load :src="item.goods_small_logo" mode="aspectFill"></image>
				
				<view class="goods-info">
					<view class="goods-title">
						{{item.goods_name}}
					</view>
					<view class="goods-price">
						 ￥{{item.goods_price}}
					</view>
				</view>
			</navigator>
		</view>
		
		<view class="loading">
			<text v-if="!hasMore">正在加载</text>
			<text v-else>我也是有底线的</text>
		</view>
	</view>
</template>

<script>
	// 导入搜索组件
	import Search from "../../components/search.vue";
	
	export default {
		data() {
			return {
				// tab栏高亮的索引值
				current: 0,
				// 商品数据列表
				list: [],
				// 商品总条数
				total: 0,
				// 当前页面
				pagenum: 1,
				// 判断是否正在加载的开关
				isLoading: false,
				// 是否到了最后一页
				hasMore: false,
				// 页面入口带过来的查询关键字
				keyword: ""
			}
		},
		components: {
			Search
		},
		onLoad(query){
			// query是页面路径的参数
			this.keyword = query.keyword;
			// 请求商品分类的数据
			this.getData();
		},
		// 页面上拉触底的事件，用来加载下一页的数据
		onReachBottom(){
			this.getData();
		},
		// 页面下拉事件
		onPullDownRefresh(){
			// 所有内容初始化
			this.list = [];
			this.pagenum = 1;
			this.hasMore = false;
			
			// 重新请求第一页数据
			this.getData();
		},
		methods: {
			// 点击tab的事件
			handleTab(index){
				this.current = index;
			},
			// 请求商品列表
			getData(){
				// 如果开关是正在加载的状态，直接返回
				// 或者到了最后一页
				if(this.isLoading || this.hasMore) return;
				// 打开开关
				this.isLoading = true;
				
				// 故意加的两秒延时，真正的项目中不能这么加
				setTimeout(() => {
					uni.request({
						url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/search",
						data: {
							query: this.keyword,
							pagenum: this.pagenum,
							pagesize: 10
						},
						success: (res) => {
							// goods是商品列表，total是总条数
							const {goods, total} = res.data.message;
							// this.list = goods;
							// 合并数据
							this.list = [...this.list, ...goods];
							this.total = total;
							
							// 页数加一，解决了不会同时存在多个请求，避免服务器的奔溃
							this.pagenum++;
							
							// 关灯，表示加载完毕
							this.isLoading = false;
							
							// 是否加载完毕
							if(this.list.length >= total){
								// 已经到了最后一页
								this.hasMore = true;
							}
							
							// 当下拉刷新的时候手动关系。
							wx.stopPullDownRefresh();
						}
					})
				}, 2000);
			}
		}
	}
</script>

<style lang="less">
.tab {
	display: flex;
	justify-content: space-around;
	
	.tab-item {
		height: 88rpx;
		width: 184rpx;
		text-align: center;
		line-height: 88rpx;
		color: #999;
	}
	
	.active {
		border-bottom: 1px red solid;
		color: #000;
	}	
}

.goods-list {
	padding: 0 20rpx;
}

.goods-item {
	padding: 20rpx 0;
	display: flex;
	
	image{
		width: 190rpx;
		height: 190rpx;
		margin-right: 20rpx;
		// 控制元素的伸缩倍数，为0表单该元素维持原本的宽度，不被挤压
		flex-shrink: 0;
	}
	
		
	.goods-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.goods-title {
			font-size: 14px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.goods-price {
			color: red;
		}
	}
}

.loading{
	padding: 30rpx;
	text-align: center;
	font-size: 14px;
	color: #ccc;
}
</style>
